<template>
  <div class="right">
    <div class="right_data1">
      <dv-decoration-7 style="width:230px;height:30px;color: #ffffff;font-weight: 600;margin-top: 2%;margin-left: -15%;margin-bottom: 3%">动态费率</dv-decoration-7>
      <dv-scroll-board :config="config_data2" style="height: 80%;width: 100%"/>
    </div>

    <div class="box_left2">
      <dv-decoration-7
        style="width:300px;height:30px;color: #ffffff;font-weight: 600;margin-bottom: 10px;margin-left: -20%">协同治理
      </dv-decoration-7>
      <div id="id_fundPure2" style="width: 100%;height: 80%;"/>
    </div>

    <!--    支付能力排行    -->
    <div class="right_data2">
      <dv-decoration-7 style="width:150px;height:30px;color: #ffffff;font-weight: 600;margin-left: -4%">基金安全</dv-decoration-7>
      <div id="table04" style="width: 100%;height: 100%"/>
    </div>

    <!--   子屏2(基金)   -->
    <Subscreen2 :dialogVisible="dialogVisible" @closeDialog="closeDialog"/>
  </div>
</template>

<script>
import echarts from "echarts";
import Subscreen2 from "./subscreen_fund";
import axios from "_axios@0.25.0@axios";

export default {
  name: "Part_right",
  components: {
    Subscreen2
  },
  data() {
    return {
      //子屏显示标记
      dialogVisible: false,
      data: {
        area: ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'],
        cbrs: {
          name: '参保人数', // 单元名
          chart: { //图表配置
            legend: ['工伤', '建筑工伤'], //图例
            xData: ['7月', '8月', '9月', '10月', '11月', '12月'], //横轴数据项
            yData: { //竖轴配置
              min: 0, //初始值
              max: 3000, //最大值
              interval: 1000, //刻度间隔
              name: '万人', //单位
            },
            series: [ //实际数据配置
              {
                name: '工伤', //数据类别
                data: [1520, 1532, 1801, 2254, 2650, 1400], //实际数据
              },
              {
                name: '建筑工伤',
                data: [1720, 2232, 2801, 2134, 2250, 1800],
              },
            ]
          },
        },
        jjszqk: {
          name: '基金收支情况',
          chart: {
            legend: ['基金收入', '基金支出'],
            xData: ['2月', '3月', '4月', '5月', '6月', '7月'],
            yData: {
              min: 0,
              max: 60,
              interval: 20,
              name: '万元',
            },
            series: [
              {
                name: '基金收入',
                data: [20, 32, 55, 60, 43, 25],
              },
              {
                name: '基金支出',
                data: [15, 25, 50, 57, 36, 18],
              },
            ]
          },
          other: {
            inOrOut: [
              {
                text: '基金收入',
                data: 8909,
                img: require('../assets/data_left_1.png')
              },
              {
                text: '基金支出',
                data: 2090,
                img: require('../assets/data_left_2.png')
              },
              {
                text: '鉴定数',
                data: 181,
                img: require('../assets/data_left_1.png')
              },
              {
                text: '认定数',
                data: 5437,
                img: require('../assets/data_left_2.png')
              }
            ],
          }
        },
        sgajph: {
          name: '事故案件排行',
          chart: {
            header: ['地区', '案件数', '事故率'],
            data: [
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1'],
              ['行1列2', '行1列3', '行1列1']
            ],
            index: true,
            indexHeader: '排行',
            columnWidth: [55],
            align: ['center'],
            headerBGC: '#1A293C',
            oddRowBGC: '#041A33',
            evenRowBGC: '#041F3A'
          },
          other: {
            casesTotal: {
              text: '案件总数',
              data: 426,
              img: require('../assets/data_left_3.png')
            }
          }
        },
      },
      // 基金收支总额
      fundTotal: [
        {
          text: '总收入',
          data: 8909,
          img: require('../assets/data_left_1.png')
        },
        {
          text: '总支出',
          data: 2090,
          img: require('../assets/data_left_2.png')
        },
        {
          text: '鉴定数',
          data: 181,
          img: require('../assets/data_left_1.png')
        },
        {
          text: '认定数',
          data: 5437,
          img: require('../assets/data_left_2.png')
        }
      ],
      config_data2: {
        header: ['单位', '调前费率', '调后费率','费率年月'],
        data: [
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
          ['金华尖峰有限责任公司', '15%', '20%', '2022.01.25'],
        ],
        index: true,
        indexHeader: '序号',
        columnWidth: [70,200,110,110,120],
        rowNum: 5,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
    }
  },
  mounted() {
    this.initFundM();
  },
  methods: {
    initFundM() {
      let xData, yData1, yData2;
      const demoXData = ['交通局', '公安局', '应急局', '电力局', '税务局', '水务局'];
      const demoYData1 = [20, 32, 55, 60, 43, 25];
      const demoYData2 = [15, 25, 50, 57, 36, 18];
      xData = xData || demoXData;
      yData1 = yData1 || demoYData1;
      yData2 = yData2 || demoYData2;

      const myChart  = echarts.init(document.getElementById("id_fundPure2"));
      const option = {
        grid: {
          top: '15%',
          right: '0%',
          bottom: '10%',
          left: '8%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: '0%',
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['案件数', '协作数']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '件',
            min: 0,
            max: 70,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '案件数',
            type: 'bar',
            barWidth: 25,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#00F2F8'
                }, {
                  offset: 1,
                  color: '#04253B'
                }]),
              }
            },
            data: yData1
          },
          {
            name: '协作数',
            type: 'line',
            smooth: false,
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EA772B',
                lineStyle: {
                  width:3
                }
              }
            },
            data: yData2
          }
        ]
      };
      option && myChart.setOption(option);
    },
    // 支付能力排行
    initFundRankRegion(result) {
      let xData, yData;
      if (result) {
        xData = [];
        yData = [];
        for (const item of result) {
          xData[xData.length] = item.areaCode;
          yData[yData.length] = parseFloat(item.payMonthPredict).toFixed(1);
        }
      }

      const xDataDemo = ["金华市", "兰溪市", "义乌市", "东阳市", "永康市", "武义县", "浦江县", "磐安县"];
      const yDataDemo = [10, 8, 7, 6, 5, 4.5, 4, 3];

      xData = xData || xDataDemo;
      yData = yData || yDataDemo;

      let yDataStr = [];
      for (const item of yData) {
        yDataStr[yDataStr.length] = item + '个月';
      }

      const myChart = echarts.init(document.getElementById("table04"))
      const salvProMax = [];//背景按最大值
      for (let i = 0; i < yData.length; i++) {
        salvProMax.push(yData[0])
      }
      // 悬浮窗轮播
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
      // let idx = 0;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: idx
      //   });
      //   idx++;
      //   if (idx >= 8) {
      //     idx = 0;
      //   }
      // }, 2400);
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '5%'
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "个月",
            min: -6,
            max: 6,
            interval: 2,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            type: "bar",
            barMaxWidth: 25,
            data: yData.map((item) => {
              // 循环
              return {
                value: item,
                label: {
                  show: true, //开启显示
                  position: item > 0 ? "top" : "bottom", //判断正负值上方显示还是下方
                  formatter: "{c}月",
                  textStyle: {
                    //数值样式
                    color: item < 0 ? "#7CC479" : "#E93030",   //数值颜色
                    fontSize: "18px",
                  },
                },
              };
            }),
            itemStyle: {//柱体背景色
              normal: {
                color: (val) => {
                  var index_color = val.value;
                  return index_color > 0 ? "#E93030" : "#7CC479";
                },
              },
            },
          },

        ]
      }
      option && myChart.setOption(option);
    },
    // 跳转对应子屏的回调
    goToDetailed() {
      this.dialogVisible = true;
    },
    // 关闭子屏的回调
    closeDialog() {
      this.dialogVisible = false
    },
    // 工伤鉴定与认定数查询
    initRdAndJdAmount(result) {
      if (result) {
        this.fundTotal[2].data = result.jds;
        this.fundTotal[3].data = result.rds;
      }
    },
    // 基金收支情况
    initFund(result) {
      let xData,yData1,yData2;
      let fundInTotal = 0;
      let fundOutTotal = 0;
      if (result) {
        xData = [];
        yData1 = [];
        yData2 = [];
        for (const item of result) {
          let fundIn = (item.income / 1000000).toFixed(2); // 单位转为百万元，小数点后保留2位(四舍五入)
          let fundOut = (item.outcome / 1000000).toFixed(2); // 单位转为百万元，小数点后保留2位(四舍五入)
          xData[xData.length] = item.aae001;
          yData1[yData1.length] = fundIn;
          yData2[yData2.length] = fundOut;
          fundInTotal += parseFloat(fundIn);
          fundOutTotal += parseFloat(fundOut);
        }
        this.fundTotal[0].data = fundInTotal.toFixed(2);
        this.fundTotal[1].data = fundOutTotal.toFixed(2);
      }

      const demoXData = ['2月', '3月', '4月', '5月', '6月', '7月'];
      const demoYData1 = [20, 32, 55, 60, 43, 25];
      const demoYData2 = [15, 25, 50, 57, 36, 18];
      xData = xData || demoXData;
      yData1 = yData1 || demoYData1;
      yData2 = yData2 || demoYData2;

      const myChart = echarts.init(document.getElementById("table02"));
      // 悬浮窗轮播
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
      // let idx = 0;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: idx
      //   });
      //   idx++;
      //   if (idx >= 6) {
      //     idx = 0;
      //   }
      // }, 2400);
      const option = {
        grid: {
          top: '20%',
          right: '10%',
          bottom: '15%',
          left: '11%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right: '10%',
          textStyle: {
            color: '#fff'
          },
          data: ['基金收入', '基金支出']
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '百万元',
            min: 0,
            max: 40,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
                formatter: '{value} '
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '基金收入',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#48D8CF'
                }, {
                  offset: 1,
                  color: '#4691D3'
                }]),
              }
            },
            data: yData1
          },
          {
            name: '基金支出',
            type: 'line',
            itemStyle: {  /*设置折线颜色*/
              normal: {
                color: '#EEBF47'
              }
            },
            data: yData2
          }
        ]
      };
      option && myChart.setOption(option);
    },
  }
}
</script>

<style scoped>
.right {
  float: right;
  height: 100%;
  width: 26%;
  margin-top: 40px;
}

.right_data1 {
  height: 29%;
  width: 100%;
}

.box_left2 {
  height: 35%;
  width: 100%;
}

.right_data2 {
  height: 36%;
  width: 100%;
}

.right_data3 {
  height: 30%;
  width: 100%;
}

.table_title {
  background: url("../assets/subtitle_short.png");
  overflow: hidden;
  background-size: cover;
  text-align: left;
  padding-left: 10%;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}

.height_right2 {
  height: 14%;
  line-height: 200%;
}

.height_right3 {
  height: 15%;
  line-height: 180%;
}

.table_left3 {
  width: 100%;
  height: 80%;
  margin-top: 1%;
}

.data_left {
  height: 20%;
  width: 94%;
  margin: 1% 6%;
}

.data_left_item {
  float: left;
  height: 100%;
  width: 25%;
}

.data_left_img {
  float: left;
  height: 68%;
  width: 35%;
  margin-top: 7%;
  overflow: hidden;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.data_left_text {
  display: inline-block;
  float: left;
  width: 65%;
  height: 100%;
  color: #fff;
}

.data1_text1 {
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
  margin-left: 6%;
  margin-top: 5%;
  color: white;
}

.data1_text2 {
  display: inline-block;
  float: left;
  width: 95%;
  height: 60%;
  font-family: LCD2;
  font-size: 1.6rem;
  text-align: left;
  margin-left: 5%;
}

.data1_text4 {
  display: inline-block;
  float: left;
  width: 13%;
  height: 70%;
  margin-left: 2%;
  margin-top: 4%;
  font-family: LCD2;
  font-size: 1.6rem;
}

.data1_text3 {
  display: inline-block;
  font-size: .8rem;
  margin-top: 5.8%;
}
</style>
